<!--
 * @Author: zww
 * @Date: 2021-08-04 09:35:53
 * @LastEditTime: 2021-08-05 11:40:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\13-左侧菜单\01-左侧导航目录.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <link rel="stylesheet" href="./css/common.css" />
  <title>Title</title>

  <style>
    .menuList {
      width: 200px;
      height: 100vh;
      background-color: #393d49;
      color: #eee;
      font-size: 15px;
      font-family: "楷体";
    }

    .title {
      height: 40px;
      line-height: 35px;
      /* text-algin缩进不一定是center时可以用text-indent */
      text-indent: 20px;
    }

    .title:hover {
      background-color: #2f4056;
    }

    .menu ul {
      background-color: #000;
    }

    .menu ul li {
      height: 30px;
      line-height: 35px;
      text-indent: 20px;
      cursor: pointer;
    }

    .menu ul li.active {
      background-color: #009688;
    }

    .title i {
      font-size: 15px;
      color: #eee;
      z-index: 999;
    }
  </style>
</head>

<body>
  <div class="menuList">
    <div class="menu" v-for="(item,i) in list">
      <div class="title" @click="item.show=!item.show">
        {{item.name}}
        <i class="iconfont icon-topbrow"></i>
      </div>
      <ul v-show="item.show">
        <li v-for="(item1,j) in item.children" @click="activeParent=i,activeChildren=j"
          :class="{active:activeParent===i&&activeChildren===j}">
          {{item1.name}}
        </li>
      </ul>
    </div>
  </div>
  <script>
    new Vue({
      el: '.menuList',
      data() {
        return {
          // 高亮索引
          activeTitleIndex: 0,
          activeChildren: 0,
          activeParent: 0,
          list: [{
              show: false,
              icon: "",
              name: "学生管理",
              children: [{
                  icon: "",
                  name: "添加学生",
                },
                {
                  icon: "",
                  name: "查询学生",
                },
                {
                  icon: "",
                  name: "学生权限",
                },
              ],
            },
            {
              show: false,
              icon: "",
              name: "员工管理",
              children: [{
                  icon: "",
                  name: "添加员工",
                },
                {
                  icon: "",
                  name: "查询员工",
                },
                {
                  icon: "",
                  name: "员工权限",
                },
              ],
            },
            {
              show: false,
              icon: "",
              name: "档案管理",
              children: [{
                  icon: "",
                  name: "添加学生档案",
                },
                {
                  icon: "",
                  name: "查询学生档案",
                },
                {
                  icon: "",
                  name: "学生权限",
                },
              ],
            },
          ],
        };
      },
    });
  </script>
</body>

</html>